<!--
    number 页码。页码从1开始，如：1，2，3，4，5，...
    offset 页码偏移量。如果页码是从0开始，则偏移量为-1；如果页码从1开始，偏移量为0
    totalPages 分页后，页的总数量。
    url URL地址。形如：/c , /c?id=1, /c/b?id=1&limit=10。

    1,会自动向url中添加页码，如：/c?id=1&page=1, /c/b?id=1&limit=10&page=1
    2,当超过totalPages>maxButtons时，会显示...代替多余的按钮
    3,maxButtons>=floatButtons*2
-->
<ul class="pagination" th:fragment="page_pager(number, offset, totalPages, url)" th:with="maxButtons=10,floatButtons=5" xmlns:th="http://www.thymeleaf.org">
    <style>
        .pagination {
            display: inline-block;
            padding-left: 0;
            margin: 20px 100px;
            border-radius: 4px;
        }

        .pagination > li {
            display: inline;
            margin: 0 50px;
        }

        .pagination > li > a, .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            margin: 0 10px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd
        }

        .pagination > li:first-child > a, .pagination > li:first-child > span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px
        }

        .pagination > li:last-child > a, .pagination > li:last-child > span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px
        }

        .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
            z-index: 2;
            color: #23527c;
            background-color: #eee;
            border-color: #ddd
        }

        .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
            z-index: 3;
            color: #fff;
            cursor: default;
            background-color: #337ab7;
            border-color: #337ab7
        }

        .pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
            color: #777;
            cursor: not-allowed;
            background-color: #fff;
            border-color: #ddd
        }

        .pagination-lg > li > a, .pagination-lg > li > span {
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.3333333
        }

        .pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px
        }

        .pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px
        }

        .pagination-sm > li > a, .pagination-sm > li > span {
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5
        }

        .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px
        }

        .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px
        }
    </style>

    <!-- 上一页 -->
    <li th:if="${number == 1}"><span>上一页</span></li>
    <li th:if="${number > 1}"><a th:href="@{${url}(pageSize=9,pageNum=${number+offset-1})}">上一页</a></li>

    <!-- 首页 -->
    <li th:if="${number == 1}" class="active"><span>1</span></li>
    <li th:if="${number > 1}"><a th:href="@{${url}(pageSize=9,pageNum=${1+offset})}">1</a></li>

    <th:block th:if="${totalPages>2 && totalPages<=maxButtons}" th:each="i : ${#numbers.sequence(2,totalPages-1)}">
        <li th:if="${number == i}" class="active"><span th:text="${i}">页码</span></li>
        <li th:if="${number != i}"><a th:href="@{${url}(pageSize=9,pageNum=${i+offset})}" th:text="${i}">页码</a></li>
    </th:block>

    <th:block th:if="${totalPages > maxButtons}">
        <th:block th:if="${(number-(floatButtons/2)) <= 2}" th:each="i : ${#numbers.sequence(2,2+floatButtons-1)}">
            <li th:if="${number == i}" class="active"><span th:text="${i}">页码</span></li>
            <li th:if="${number != i}"><a th:href="@{${url}(pageSize=9,pageNum=${i+offset})}" th:text="${i}">页码</a></li>
        </th:block>
        <!-- ... -->
        <li th:if="${(number-(floatButtons/2))>2}"><span>...</span></li>

        <th:block th:if="${((number-(floatButtons/2))>2) && ((number+(floatButtons/2)-(floatButtons%2==0?1:0)) < (totalPages-1))}"
                  th:each="i : ${#numbers.sequence(number-(floatButtons/2),number+(floatButtons/2)-(floatButtons%2==0?1:0))}">
            <li th:if="${number == i}" class="active"><span th:text="${i}">页码</span></li>
            <li th:if="${number != i}"><a th:href="@{${url}(pageSize=9,pageNum=${i+offset})}" th:text="${i}">页码</a></li>
        </th:block>

        <!-- ... -->
        <li th:if="${(number+(floatButtons/2)-(floatButtons%2==0?1:0)) < (totalPages-1)}"><span>...</span></li>
        <th:block th:if="${(number+(floatButtons/2)-(floatButtons%2==0?1:0)) >= (totalPages-1)}" th:each="i : ${#numbers.sequence(totalPages-floatButtons,totalPages-1)}">
            <li th:if="${number == i}" class="active"><span th:text="${i}">页码</span></li>
            <li th:if="${number != i}"><a th:href="@{${url}(pageSize=9,pageNum=${i+offset})}" th:text="${i}">页码</a></li>
        </th:block>
    </th:block>

    <!-- 最后一页 -->
    <li th:if="${totalPages>1 && number == totalPages}" class="active"><span th:text="${totalPages}">页码</span></li>
    <li th:if="${totalPages>1 && number != totalPages}"><a th:href="@{${url}(pageSize=9,pageNum=${totalPages+offset})}" th:text="${totalPages}">页码</a></li>

    <!-- 下一页 -->
    <li th:if="${number >= totalPages}"><span>下一页</span></li>
    <li th:if="${number < totalPages}"><a th:href="@{${url}(pageSize=9,pageNum=${number+offset+1})}">下一页</a></li>
</ul>
